<template>
  <el-card>
    <el-form :model="searchForm" label-width="100px" ref="searchFormRef" inline>
      <el-form-item label="角色名称">
        <el-input
          clearable
          placeholder="角色名称"
          v-model="searchForm.roleName"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 14px">
    <el-button type="primary" size="default" icon="Plus" @click="onAdd">
      新增角色
    </el-button>
    <el-table
      v-loading="loading"
      style="margin: 10px 0px"
      border
      :data="tableData"
    >
      <el-table-column
        label="序号"
        width="80px"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column label="id" prop="id" align="center"></el-table-column>
      <el-table-column
        label="角色名称"
        prop="roleName"
        align="center"
      ></el-table-column>

      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="更新时间"
        prop="updateTime"
        align="center"
      ></el-table-column>
      <el-table-column width="240" label="操作" align="center">
        <template #="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="onPersimission(row)"
          >
            分配权限
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="onEdit(row.id, row.roleName)"
          >
            编辑
          </el-button>

          <el-popconfirm
            :title="`您确定要删除${row.tmName}?`"
            width="250px"
            icon="Delete"
            @confirm="onDelete(row.id)"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="pageChange"
      :pager-count="9"
      v-model:current-page="page"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
    />
    <AddRole
      v-if="showRoleDlg"
      :showDlg="showRoleDlg"
      @closeDlg="showRoleDlg = false"
      :id="currentId"
      @saveDlg="saveDlg"
      :roleName="roleNames"
    ></AddRole>
    <PerRole
      v-if="showPerDlg"
      :showDlg="showPerDlg"
      @closeDlg="showPerDlg = false"
      :id="currentId"
      @saveDlg="saveDlg"
      :roleName="roleNames"
    ></PerRole>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { reqROLEList, reqDeleteROLE } from '@/api/acl/role/role'
import { ElMessage } from 'element-plus'
import type { RoleList, RoleData } from '@/api/acl/tole/type'
import AddRole from './addRole.vue'
import PerRole from './perRole.vue'
let searchForm = reactive({
  roleName: '',
})
let loading = ref<boolean>(false)
const searchFormRef = ref()
//获取子组件实例SkuForm
let page = ref<number>(1)
let limit = ref<number>(5)
let total = ref<number>(0)
let tableData = ref<RoleData[]>([])
let showRoleDlg = ref<boolean>(false)
let showPerDlg = ref<boolean>(false)
let currentId = ref()
let roleNames = ref<string>('')
onMounted(() => {
  getTableData()
})
const getTableData = () => {
  loading.value = true
  reqROLEList(page.value, limit.value, searchForm.roleName)
    .then((res: RoleList) => {
      console.log('res: ', res)
      if (res.code == 200) {
        console.log('res: ', res)
        tableData.value = res.data.records || []
        total.value = res.data.total || 0
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const onSearch = () => {
  page.value = 1
  getTableData()
}

const saveDlg = () => {
  page.value = 1
  getTableData()
  showRoleDlg.value = false
  showPerDlg.value = false
}
const onReset = () => {
  page.value = 1
  searchForm.roleName = ''
  getTableData()
}
const onPersimission = (row: any) => {
  currentId.value = row.id
  roleNames.value = row.roleName
  showPerDlg.value = true
}
const onAdd = () => {
  showRoleDlg.value = true
  currentId.value = ''
  roleNames.value = ''
}
const onEdit = (id: number, roleName: string) => {
  showRoleDlg.value = true
  currentId.value = id
  roleNames.value = roleName
}

const sizeChange = (size: number) => {
  limit.value = size
  getTableData()
}
const pageChange = (pageNo: number) => {
  console.log('page: ', pageNo)
  page.value = pageNo
  getTableData()
}
const onDelete = async (id: number) => {
  let result = await reqDeleteROLE(id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getTableData()
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
</script>
<style scoped lang="scss"></style>
